<template>
  <div>
	<div class="rightbody">
		<div class="tabheader3">
			<ul>
				<li class="active" @click="checkNva(0)">背景</li>
			</ul>
		</div>
		<div class="bgcolorpicker clearfix">
			<div class="lpart">
				<p class="bgcolor">
					 <el-color-picker v-model="color" @change="colorPickerChange"></el-color-picker>
				</p>
				<p>纯色背景</p>
			</div>
			<div class="rpart">
				<template v-for="(item,index) in colorList">

					<a :style="setAstyle(index)" @click="addBackgroundColor(index)"></a>
				</template>

			</div>
		</div>
		<div class="bgtype">
	       
	        <a :class="{'active':top_btn == 1}" @click="categoryClick(1)">推荐背景</a>

	        <a :class="{'active':top_btn == 2}" @click="categoryClick(2)">纹理背景</a>

	        <a  :class="{'active':top_btn == 3}" @click="categoryClick(3)">我的背景</a>

	    </div>

	    <div class="bgtabs1" v-show="top_btn == 1" v-infinite-scroll="loadMoreOne" infinite-scroll-disabled="busy" infinite-scroll-distance="0">
			<div class="bgwrap">
				<ul>
					<waterfall :line-gap="150" :fixed-height="true" :watch="backGroundList">
						<!-- each component is wrapped by a waterfall slot -->
						<waterfall-slot
							v-for="(item, index) in backGroundList"
							:width="140"
							:height="item.height*140/80+10"
							:order="index"
							:key="item.id"
						>
							<li >
						         <img :src="item.thumb" @click="addBackgroundImage(1,index)">
					         </li>
						</waterfall-slot>
					</waterfall>
				</ul>
				 <div v-show="backGroundList.length==0" class="nopic"></div>
			</div>
		</div>


		<div class="bgtabs2" v-show="top_btn == 2" v-infinite-scroll="loadMoreTwo" infinite-scroll-disabled="textureBusy" infinite-scroll-distance="0">
			<div class="bgwrap">
				<ul>
					<waterfall :line-gap="150" :fixed-height="true" :watch="textureList">
						<!-- each component is wrapped by a waterfall slot -->
						<waterfall-slot
							v-for="(item, index) in textureList"
							:width="140"
							:height="item.height*140/80+10"
							:order="index"
							:key="item.id"
						>
							<li >
						         <img :src="item.thumb" @click="addBackgroundImage(2,index)">
					         </li>
						</waterfall-slot>
					</waterfall>
					
				</ul>
				 <div v-show="textureList.length==0" class="nopic"></div>
			</div>
		</div>


		<div class="bgtabs3" v-show="top_btn == 3" v-infinite-scroll="loadMoreThree" infinite-scroll-disabled="busy" infinite-scroll-distance="0">
			<div class="bgwrap">
				<ul>
					<li v-for="(item,index) in MybackgroundPicList">
						<img :src="item.thumb" @click="addBackgroundImage(3,index)">
					</li>
				</ul>
				 <div v-show="MybackgroundPicList.length==0" class="nopic"></div>
			</div>

			<div class="editbg pa" v-if="uploadButton">
			<!-- <a @click="upload">自定义背景</a> -->
        <!-- <a @click="uploadPic">上传图片</a> -->
		        <Upload
		          accept="image/gif,image/jpeg,image/jpg,image/png"
		          ref="upload"
		          :with-credentials="true"
		          :max-size="1024*5"
		          multiple
		          :action="uploadUrl" :on-success="uploadsuccess" :on-error="uploaderror" :on-exceeded-size="uploadexceeded">
		          <a>上传背景</a>
		        </Upload>
		  	</div>
		</div>

		


	</div>
  <upload-pic :showPicUpload="showupload" :uploadType="2" v-on:close="showupload=false"></upload-pic>
  </div>
</template>

<script>
	import api from '../api/index.js'
	import UploadPic from './common/UploadPic'
	import Waterfall from 'vue-waterfall/lib/waterfall'
    import WaterfallSlot from 'vue-waterfall/lib/waterfall-slot'
	export default {
		name: "backgroundFunc",
		components:{
			UploadPic,
			Waterfall,
            WaterfallSlot
		},
		data() {

			return {
				nav_top_btn: 1,
				top_btn: 1,

				backGroundList:[],
				page: 1, //当前页
				num: 25, // 一页显示多少条
				busy: false,

				textureList:[],
				texturePage: 1, //当前页
				textureBusy: false,


				MybackgroundPicList:[],
				Mypage: 1, //当前页
		        MyBusy: false,


				uploadUrl: "",
				showupload: false,
				color: null,
				baseUrl: "http://res.yaoyue365.com/",
				
				colorList: ["#ffffff", "#c9f5ff", "#cbdeff", "#bfb6ff", "#d7b6ff", "#efbfdd", "#ffcfc1", "#ffe8c5", "#fff6d4", "#e2efc3", "#dbdbdb", "#67e2ff", "#69a1ff", "#6a55ff", "#a155ff", "#e16cb3", "#ff835f", "#ffc265", "#ffe371", "#c0e073", "#9b9b9b", "#0dd1ff", "#0f67ff", "#1e00fb", "#7000fb", "#dd1690", "#ff3d05", "#ff9e0a", "#ffd118", "#a4dc1c", "#161616", "#0091b2", "#0042b4", "#1300a1", "#4800a1", "#9c0060", "#ac0000", "#af6900", "#bb9600", "#729f00"],
				page: 1, //当前页
				num: 25, // 一页显示多少条
				busy: false,
				uploadButton:true
			}

		},
		created() {
			this.uploadUrl = api.uploadPicType(1);
			// this.initData(0, 1, 25)
		},
	    mounted() {

	    },
		methods: {
			upload() {
				this.showupload = true;
			},
			uploadsuccess(response){

		        this.MybackgroundPicList.unshift(response.file)

		         var params = {};
		          params.type = "bg";
		          params.src = response.file.src;
		          params.subType = 2;
		          this.$store.dispatch('addPicOrBg', params);
		          this.$refs.upload.fileList = [];

		      },
		      uploaderror(error){
		        this.$Message.error('上传图片失败');
		      },
		      uploadexceeded(){
		        this.$Message.error('文件大小超出限制!最大3M!');
		      },

		      loadMoreOne(){

		      	this.busy = true;

				let newPage = this.page;
				// console.log(newPage + "----" + this.num)
				// debugger
				this.initData1(newPage, this.num);
				this.busy = false;

		      },
		      loadMoreTwo(){

				  if(this.top_btn != 2){
					  return;
				  }

		      	this.textureBusy = true;
				let newPage = this.texturePage;
				this.initData2(newPage, this.num);
				this.textureBusy = false;

		      },
		      loadMoreThree(){

				   if(this.top_btn != 3){
					  return;
				  }

		      	this.MyBusy = true;
				let newPage = this.Mypage;
				this.initMyData(newPage, this.num);
				this.MyBusy = false;

		      },
		      initMyData(page, pageSize){
		      	
		      	this.$http.get(api.getMyPic(1, page, pageSize)).then(res => {

		      		  if(res.data.msg == '未登录'){
			            this.uploadButton = false;
			            //console.log('登录弹框');
			            return
			          }else{
			            this.uploadButton = true;
			          }

			          if (this.MybackgroundPicList.length == 0) {

			            this.MybackgroundPicList = res.data.lists;

			            this.Mypage++;
			            // this.MyBusy = false;
			          } else {

			            if (res.data.lists.length == 0) {

			              // this.MyBusy = false;

			            } else {
			              for (var i = 0; i < res.data.lists.length; i++) {
			                var bean = res.data.lists[i];
			                this.MybackgroundPicList.push(bean);
			              }
			              this.Mypage++;
			              // this.MyBusy = false;
			            }
			          }

			        }).catch(error => { // 错误处理
			          console.log(error)
			          this.MyBusy = false;
			          this.$Message.error('网络开小差啦~');
			        })

		      },
		      initData1(page, pageSize) {
				this.$http.get(api.getSysfile(1,48,page, pageSize)).then(res => {

					// console.log(res.data.lists)
					// debugger
					if(this.backGroundList.length == 0) {
						this.backGroundList = res.data.lists;
						this.page++;
						// this.busy = false
					} else {
						if(res.data.lists.length == 0) {
							// this.busy = false;
						} else {
							for(var i = 0; i < res.data.lists.length; i++) {
								var bean = res.data.lists[i];
								this.backGroundList.push(bean);
							}
							this.page++
							// this.busy = false
						}
					}
					// debugger
				}).catch((error) => { // 错误处理
//					console.log(error)
					this.busy = false
					window.alert('获取资源信息出错！')
				})

			 },
			initData2(page, pageSize) {
				this.$http.get(api.getSysfile(1,49,page, pageSize)).then(res => {

					// console.log(res.data.lists)
					// debugger
					if(this.textureList.length == 0) {
						this.textureList = res.data.lists;
						this.texturePage++;
						// this.busy = false
					} else {
						if(res.data.lists.length == 0) {
							// this.busy = false;
						} else {
							for(var i = 0; i < res.data.lists.length; i++) {
								var bean = res.data.lists[i];
								this.textureList.push(bean);
							}
							this.texturePage++
							// this.busy = false
						}
					}
					// debugger
				}).catch((error) => { // 错误处理
//					console.log(error)
					this.busy = false
					window.alert('获取资源信息出错！')
				})

			},
			loadMore(index) {
				this.busy = true;

				let newPage = this.page;
				// console.log(newPage + "----" + this.num)
				// debugger
				this.initData(0, newPage, this.num);
				this.busy = false;
			},
			setAstyle(index) {

				// debugger
				var color = this.colorList[index];

				return "background: " + color;

			},
			categoryClick(index){
				this.top_btn = index;

				// if (index == 3) {

				// 	this.loadMyBackgroundImageData()
				// }else{

					
				// }	

				if(this.top_btn ==2){
					this.loadMoreTwo()
					// debugger
				}else if (this.top_btn ==3){
					this.loadMoreThree()
				}

			},

			loadMyBackgroundImageData(){

				this.datalist = [];
				 this.$http.get(api.getMyPic(1, 1, 10)).then(res => {

			          if (this.datalist.length == 0) {

			            this.datalist = res.data.lists;

			            this.Mypage++;
			            // this.MyBusy = false;
			          } else {

			            if (res.data.lists.length == 0) {

			              // this.MyBusy = false;

			            } else {
			              for (var i = 0; i < res.data.lists.length; i++) {
			                var bean = res.data.lists[i];
			                this.datalist.push(bean);
			              }
			              this.Mypage++;
			              // this.MyBusy = false;
			            }
			          }

			        }).catch(error => { // 错误处理
			          console.log(error)
			          this.MyBusy = false;
			          this.$Message.error('网络开小差啦~');
			        })

			},
			initData(index, page, pageSize) {
				// this.busy = true;
				//2 图片 1 背景 3音乐 4 svg
				if (index == 1) {

					index = 48;

				}else if (index == 2) {

					index = 49;
				}

				this.$http.get(api.getSysfile(1,index,page, pageSize)).then(res => {

					// console.log(res.data.lists)
					// debugger
					if(this.datalist.length == 0) {
						this.datalist = res.data.lists;
						this.page++;
						// this.busy = false
					} else {
						if(res.data.lists.length == 0) {
							// this.busy = false;
						} else {
							for(var i = 0; i < res.data.lists.length; i++) {
								var bean = res.data.lists[i];
								this.datalist.push(bean);
							}
							this.page++
							// this.busy = false
						}
					}
					// debugger
				}).catch((error) => { // 错误处理
//					console.log(error)
					this.busy = false
					window.alert('获取资源信息出错！')
				})

			},
			//添加背景颜色点击事件
			addBackgroundColor(index) {
				// debugger
				var color = this.colorList[index];
				var params = {};
				params.type = "bg";
				params.color = color;
				params.subType = 1;
				this.$store.dispatch('addPicOrBg', params);

			},
			colorPickerChange(value){

               var params = {};
				params.type = "bg";
				params.color = value;
				params.subType = 1;
				this.$store.dispatch('addPicOrBg', params);

			},
			//添加背景图片点击事件
			addBackgroundImage(type,index) {
				// 修改 当前 page下的 elements[0]
				var obj = {};
				if (type == 1) {

					obj = this.backGroundList[index];

				}else if (type ==2){

					obj = this.textureList[index];

				}else if (type ==3){

					obj = this.MybackgroundPicList[index];
					
				}

				// debugger
				var params = {};
				params.type = "bg";
				params.src = obj.src;
				params.subType = 2;
				this.$store.dispatch('addPicOrBg', params);

			}

		}

}
</script>

<style type="text/javascript">
.bgtype{width: 290px;height: 36px;line-height: 36px;text-align: center;background: #f2f2f2;margin: 15px auto 0;}
.bgtype a{display: inline-block;color: #696969;font-weight: bold;font-size: 14px;padding: 0 5px;}
.bgtype a:hover,.bgtype a.active{color: #22d7bb;}
.tabheader3{height: 45px;line-height: 45px;width: 100%;overflow: hidden;background: #f0f0f0;}
.tabheader3 li{float: left;width: 100%;text-align: center;font-size: 14px;cursor: pointer;}
.tabheader3 li.active{font-weight: bold;color: #1abd9b;background: #fff;}
.bgcolor{background: url(../assets/images/colorpicker.png) no-repeat center;background-size: contain;padding: 0;}
.bgcolorpicker{width:290px;height: 120px;margin: 0 auto;background: #ebebeb;}
.bgcolorpicker .lpart{float: left; padding: 20px;width: 80px;height: 120px;}
.bgcolorpicker .lpart p{width: 40px;height: 40px;font-size: 14px;text-align: center;}
.bgcolorpicker .rpart{float: left; width: 200px;height: 120px;padding: 20px;padding-left: 0;}
.bgcolorpicker .rpart a{width: 18px;height: 19px;float: left;} 
.editbg{bottom: -65px;left: 5px;}
.editbg a{display: block;width: 280px;height: 40px;line-height: 40px;text-align: center; color: #fff;border-radius: 4px;font-size: 15px;background: #1abd9b;}
.bgwrap ul{position: relative}
.bgwrap li{position: relative;float: left; width: 139px;overflow: hidden;}
.bgwrap li img{width: 139px;height: auto}
.bgtabs1{position: fixed;width: 310px; bottom: 20px;top: 276px;left:85px;overflow-y: auto;}
.bgtabs2{position: fixed;width: 310px; bottom: 20px;top: 276px;left:85px;overflow-y: auto;}
.bgtabs3{position: fixed;width: 310px; bottom: 65px;top: 276px;left:85px;}
.bgtabs3 img{width:100%;height: 100%}
.bgtabs3 .bgwrap{overflow-y: auto;height: 100%;}
</style>
